<template>
  <section class="bread-crumb">
    <div class="hamburger">
      <i
        :class="[
          collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold',
          'btn-collapse'
        ]"
        @click="menuCollapse()"
      ></i>
    </div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <span class="title">{{ parentTitle }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="title bold">{{ title }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </section>
</template>

<script>
export default {
  computed: {
    parentTitle() {
      return this.$route.meta.parentTitle;
    },
    title() {
      return this.$route.meta.title;
    },
    collapse() {
      return this.$store.state.collapse;
    }
  },

  methods: {
    menuCollapse() {
      const isColl = this.collapse;
      this.$store.commit("MENU_COLLAPSE", !isColl);
    }
  }
};
</script>

<style lang="scss" scoped>
.bread-crumb {
  height: 50px;
  display: flex;
  align-items: center;

  .title {
    font-size: 14px;

    &.bold {
      font-weight: bold;
    }
  }
}

// 收起/展开 菜单按钮
.hamburger {
  padding: 0 22px 0 10px;

  .btn-collapse {
    font-size: 30px;
    transition: all 0.2s;

    &:hover {
      color: var(--c-active);
      cursor: pointer;
    }
  }
}
</style>
